<template>
	<view>
		<!-- 		<view class="head">
			<view class="head-top">模板页面</view>
			
		</view> -->
		<view class="item">
			<view class="title">AI绘画输入框状态：</view>
			<switch :checked="info.open" @change="change" />
			<text v-if="info.open">开启</text>
			<text v-else>关闭</text>
		</view>
		<view class="item">
			<view class="title">普通r1存储数量：</view>
			<uni-easyinput v-model="info.roleNum.r1" maxlength="3" placeholder="请输入数字" type="number" />
		</view>
		<view class="item">
			<view class="title">会员r2存储数量：</view>
			<uni-easyinput v-model="info.roleNum.r2" maxlength="3" placeholder="请输入数字" type="number" />
		</view>
		<view class="btn">
			<view class="submit" @click="submit">提交信息</view>
		</view>
		<!-- <view class="no-box">
			<image src="../../static/images/icon/icon-no.png" class="icon-no"></image>
			<view class="">暂无内容</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: {
					open: null,
					roleNum: {
						r1: null,
						r2: null,
						r3: null,
					}
				},


			}
		},
		computed: {},
		watch: {},
		methods: {
			change(e){
				// console.log(e.detail.value)
				this.info.open = e.detail.value
			},
			async getInfo() {
				let db = wx.cloud.database()
				let info = await db.collection('config').where({
					name: "config"
				}).get()
				console.log(info.data[0])
				this.info = info.data[0]
			},
			async submit() {
				return
				if(!this.info.roleNum.r1){
					uni.showToast({
						icon:"none",
						title:"输入数量"
					})
					return
				}
				if(!this.info.roleNum.r2){
					uni.showToast({
						icon:"none",
						title:"输入数量"
					})
					return
				}
				let obj = {
					open:this.info.open,
					roleNum:this.info.roleNum,
				}
				// console.log(obj)
				const db = wx.cloud.database()
				let res = await db.collection("config").doc(this.info._id).update({
					data:obj
				})
				// console.log(res)
				uni.showToast({
					icon:"none",
					title:"修改成功"
				})
				this.getInfo()
				
			},
		},
		onLoad(options) {
			// this.getInfo()
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #fff;

		.head-top {
			font-size: 30rpx;
			text-align: center;
			color: red;
		}
	}

	.item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-bottom: 10rpx;
		padding-right: 30rpx;

		.title {
			// width: 160rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}


	}

	.btn {
		margin-top: 10rpx;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 80rpx;

		.submit {
			margin: 0 auto;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(#00AEEC, #1296db);
			color: #fff;
			border-radius: 20rpx;
		}
	}

	.no-box {
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
		color: #8a8a8a;

		.icon-no {
			width: 300rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
